<template>
  <div class="layui-form layui-form-pane layui-tab-item layui-show">
    <validation-observer ref="observer" v-slot="{ validate }">
      <div class="layui-form-item">
        <label for="L_email" class="layui-form-label">邮箱</label>
        <validation-provider
          name="username"
          rules="required|username"
          v-slot="{ errors }"
        >
          <div class="layui-input-inline">
            <input
              type="text"
              name="username"
              v-model="username"
              placeholder="请输入用户名"
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="layui-form-mid">
            <span style="color: #c00">{{ errors[0] }}</span>
          </div>
        </validation-provider>
        <!-- <div class="layui-form-mid layui-word-aux">如果您在邮箱已激活的情况下，变更了邮箱，需<a href="activate.html" style="font-size: 12px; color: #4f99cf;">重新验证邮箱</a>。</div> -->
      </div>
      <div class="layui-form-item">
        <label for="L_username" class="layui-form-label">昵称</label>
        <validation-provider
          name="name"
          rules="required|min:4|name"
          v-slot="{ errors }"
        >
          <div class="layui-input-inline">
            <input
              type="text"
              name="name"
              v-model="name"
              placeholder="请输入昵称"
              autocomplete="off"
              class="layui-input"
            />
          </div>
          <div class="layui-form-mid">
            <span style="color: #c00">{{ errors[0] }}</span>
          </div>
        </validation-provider>
      </div>
      <div class="layui-form-item">
        <label for="L_username" class="layui-form-label">性别</label>
        <div class="layui-input-inline sex">
          <label for="gendel1">
            <input
              id="gendel1"
              v-model="gender"
              type="radio"
              name="sex"
              value="0"
              checked
              title="男"
            />
            <i></i>
            男
          </label>
          <label for="gendel2">
            <input
              id="gendel2"
              v-model="gender"
              type="radio"
              name="sex"
              value="1"
              title="女"
            />
            <i></i>
            女
          </label>
        </div>
      </div>
      <div class="layui-form-item">
        <label for="L_city" class="layui-form-label">城市</label>
        <div class="layui-input-inline">
          <input
            type="text"
            id="L_city"
            v-model="location"
            name="city"
            class="layui-input"
          />
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label for="L_sign" class="layui-form-label">签名</label>
        <div class="layui-input-block">
          <textarea
            placeholder="随便写些什么刷下存在感"
            v-model="regmark"
            id="L_sign"
            name="sign"
            class="layui-textarea"
            style="height: 80px"
          ></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn" key="set-mine" lay-filter="*" @click="submit">
          确认修改
        </button>
      </div>
    </validation-observer>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
import { updateUserInfo } from '@/api/user'
export default {
  name: 'myinfo',
  components: {
    ValidationProvider,
    ValidationObserver,
  },
  props: {

  },
  data () {
    return {
      username: '',
      name: '',
      location: '',
      regmark: '',
      gender: '0'
    };
  },
  computed: {

  },
  created () {

  },
  mounted () {
    let { username, name, location, gender, regmark } =
      this.$store.state.userInfo
    this.username = username || ''
    this.name = name || ''
    this.location = location || ''
    this.gender = gender || ''
    this.regmark = regmark || ''
  },
  watch: {

  },
  methods: {
    async submit () {
      const isValid = await this.$refs.observer.validate()
      if (!isValid) {
        // ABORT!!
        return
      }
      updateUserInfo({
        username: this.username,
        name: this.name,
        location: this.location,
        regmark: this.regmark,
        gender: this.gender
      }).then((res) => {
        if (res.code === 200) {
          this.$store.commit('setUserInfo', {
            ...this.$store.state.userInfo,
            ...{
              username: this.username,
              name: this.name,
              location: this.location,
              regmark: this.regmark,
              gender: this.gender
            }
          })
          this.$alert('更新成功')
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.layui-form input[type='radio'],
.layui-form select {
  display: inline-block;
}
.sex {
  margin-top: 10px;
  margin-left: 10px;
}
</style>
